<template>
  <view class="radio-group">
    <!-- 遍历传入的选项数组 -->
    <view 
      v-for="(item, index) in options" 
      :key="item.value"
      class="radio-item"
      :class="{ 'selected': item.value === selectedValue, 'radio-left': index === 0, 'radio-right': index === options.length - 1 }"
      @click="handleSelect(item.value)"
    >
      {{ item.label }}
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

const props = defineProps({
  options: {
    type: Array,
    required: true,
    default: () => []
  },
  modelValue: {
    type: [String, Number],
    default: ''
  }
});

// 定义emit事件
const emit = defineEmits(['update:modelValue']);

// 当前选中的值
const selectedValue = ref(props.modelValue);

// 监听外部传入的modelValue变化
watch(() => props.modelValue, (newVal) => {
  selectedValue.value = newVal;
});

// 处理选项点击
const handleSelect = (value) => {
  selectedValue.value = value;
  emit('update:modelValue', value);
};
</script>

<style scoped lang="scss">
.radio-group {
  display: flex;
  flex-wrap: wrap;

  .radio-item {
    height: 48rpx;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    font-size: 24rpx;
    font-weight: normal;
    transition: all 0.3s;
    border: 1rpx solid #00D1B6;
    
    background-color: #fff;
    color: #666666;
  }
  .radio-item.radio-left {
    border-radius: 50rpx 0 0 50rpx;
  }
  .radio-item.radio-right {
    padding: 9rpx 16rpx;
    border-radius: 0 50rpx 50rpx 0;
  }

  .radio-item.selected {
    background-color: #00D1B6;
    color: #FFFFFF;
    font-weight: bold;
  }
}
</style>
